<template>
  <div class="filter-component-content">
    <p class="title">{{ title }}</p>
    <div class="content">
      <span
        @click="addFilter(item)"
        :class="{ active: activeList.includes(item.value) }"
        class="tag-xz"
        v-for="(item, index) in houseList"
        :key="index"
        >{{ item.label }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'queryItem',
  components: {},
  props: {
    title: {
      type: String,
      required: true
    },
    houseList: {
      type: Array,
      required: true
    },
    activeList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    addFilter(i) {
      if (this.activeList.includes(i.value)) {
        this.$emit('removeStr', i.value)
      } else {
        this.$emit('addStr', i.value)
      }
    }
  }
}
</script>

<style scoped lang="less">
.filter-component-content {
  .title {
    color: #333;
    margin: 40px 0;
    font-size: 30px !important;
  }
  .content {
    margin: 0 0 0 80px;
    padding: 0 0 28px;
    .tag-xz {
      display: inline-block;
      height: 64px;
      width: 140px;
      margin: 0 36px 30px 0;
      border: 2px solid #ddd;
      border-radius: 6px;
      line-height: 64px;
      text-align: center;
      font-size: 24px;
      color: #888;
    }
    .active {
      border: 2px px solid #21b97a;
      background-color: #defaef;
    }
  }
}
</style>
